<template>
  <view style="position: relative;">
    <view :style="{height: height + 'px'}"></view>
    <!-- 顶部自定义导航 -->
    <TnNavbar fixed alpha customBack back-icon="" home-icon="" :placeholder="false" bg-color="transparent" :bottom-shadow="false">
      <view>
        赛迷小助手
      </view>
      <template #back>
        <view></view>
      </template>
    </TnNavbar>
    <swiper
        style="position:sticky;z-index: 15;height: 320rpx !important;"
        :style="{top: height + 'px'}"
        class="card-swiper square-dot"
        :autoplay="true"
        duration="500"
        interval="2000"
        :indicator-dots="true"
        :circular="true"
        @change="cardSwiper"
        previousMargin="0.01rpx"
        indicator-color="#8799a3"
        indicator-active-color="#0081ff"
    >
      <swiper-item
          style="padding: 20rpx 0;"
          @click="tn('/pages/update-notice/update-notice')" :class="cardCur === index ? 'cur' : ''"
          v-for="(item, index) in swiperList" :key="index">
        <view class="swiper-item">
          <image :src="item" mode="aspectFill"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="indication" style="margin: 0">
      <block v-for="(item,index) in swiperList" :key="index">
        <image class="spot" src="/static/title1.png" v-if="cardCur===index"></image>
        <image class="spot" src="/static/title.png" v-else></image>
      </block>
    </view>
    <!-- 米卡 -->
    <view style="position: fixed; z-index: 10;right: 5px; bottom: 100px;" @click="playMusic">
      <image src="https://seerforwdw.info/seer-image/kami.gif"
             style="width: 60px;height: 60px;transform: rotateY(-180deg)"></image>
<!--      <image src="https://seerforwdw.info/seer-image/music.png" class="music"-->
<!--             style="width: 30px;height: 30px;position: absolute;top: -5px;right: 30px"></image>-->
    </view>
    <scroll-view
        scroll-y
        :style="{height: `calc(100vh - ${height + 90}px - 390rpx)`}"
        style="padding-bottom: 10px; margin-top: 40rpx"
    >
      <view class="module-card" v-for="(item, index) in optionList">
        <view class="padding-tb-sm">{{ item.title }}</view>
        <view class="flex flex-wrap">
          <view
              @tap="tn(item.page)"
              style="width: 25%"
              v-for="item in item.value"
              class="flex flex-direction justify-between align-center padding-tb-sm"
          >
            <view>
              <TnIcon :name="item.icon" :color="item.color" :size="item.size"/>
            </view>
            <view class="text-sm margin-top-xs">
              {{ item.title }}
            </view>
          </view>
          <view style="width: 100%;" v-if="index === 1">
            <ad-custom unit-id="adunit-025ed9a0cf7f896a" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
          </view>
        </view>
      </view>
    </scroll-view>

    <!--    <scroll-view scroll-y :style="{height: `calc(100vh - ${height + 90}px - 430rpx)`}" style="margin-top: 10px">
          <view class="tn-info__container tn-flex tn-flex-wrap items-center justify-between tn-ml tn-mr">
            <block v-for="(item, index) in optionList" :key="index">
              <view class="tn-info__item tn-flex tn-flex-row items-center justify-between tn-white_text"
                    :style="'background-color:'+ item.color +';'" @click="tn(item.page)">
                <view class="tn-info__item__left tn-flex tn-flex-row items-center">
                  <view class="tn-info__item__left__content">
                    <view class="tn-info__item__left__content&#45;&#45;title tn-text-bold" style="font-size: 38rpx;">
                      {{ item.title }}
                    </view>
                    <view class="tn-info__item__left__content&#45;&#45;data tn-pt-xs">
                      {{ item.value }}
                      <TnIcon name="right"/>
                    </view>
                  </view>
                </view>
                <view class="tn-info__item__right">
                  <view class="tn-info__item__right&#45;&#45;icon">
                    <TnIcon class="tn-three" :name="item.icon"></TnIcon>
                  </view>
                </view>
                <view class="tn-info__item__bottom">
                  <view class='name tn-text-sm tn-gray_text' style="margin-left: -10rpx;">
                    <text class="tn-icon-code tn-pr-xs" style="opacity: 0;"></text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </scroll-view>-->
    <TnPopup v-model="showPopup" :overlay-closeable="false" :z-index="20098">
      <view class="tn-p-lg" style="width: 600rpx">
        <view class="flex justify-center text-bold text-lg margin-bottom">{{ title }}</view>
        <text v-text="content"></text>
        <view class="flex flex-direction margin-top">
          <button class="cu-btn bg-olive" @click="confirmMessage">确认</button>
        </view>
      </view>
    </TnPopup>
  </view>
</template>
<script setup>
  import TnIcon from '../../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue';
  import {ref, getCurrentInstance, onMounted} from 'vue';
  import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
  import {useUniAppSystemRectInfo} from "../../../uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info";
  import TnNavbar from "../../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import {getShowMessage, setShowMessage} from "../../../storage/show_message";

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  const cardCur = ref(0)
  const swiperList = ref([])

  const cardSwiper = (e) => {
    cardCur.value = e.detail.current
  }

  const optionList = ref([])

  const tn = (url) => {
    uni.navigateTo({
      url
    })
    // if (url === '/pages/gift/gift' || url === '/pagesA/monster-collect/monster-collect' || uni.getStorageSync('openid') ===
    //     'ov2zS5RoM8fqV_5womZDqF-0e7aI') {
    //   uni.navigateTo({
    //     url
    //   })
    // } else {
    //   const now = new Date().getTime()
    //   if (getNow() && (now - getNow() > 48 * 60 * 60 * 1000)) {
    //     setAd(true)
    //   }
    //   if (getAd() && getFreeNum() === 0) {
    //     uni.navigateTo({
    //       url: '/pages/ad/ad?url=' + encodeURIComponent(JSON.stringify(url))
    //     })
    //   } else {
    //     let freeNum = getFreeNum()
    //     if (freeNum > 0) {
    //       freeNum--
    //       setFreeNum(freeNum)
    //     }
    //     uni.navigateTo({
    //       url
    //     })
    //   }
    // }
  }

  const {proxy} = getCurrentInstance()

  // 播放暂停音乐
  const playMusic = () => {
    if (proxy.$const.bgMusic.isStart) {
      uni.showToast({
        title: '背景音乐已暂停',
        icon: 'none'
      })
      proxy.$const.bgMusic.pause()
    } else {
      uni.showToast({
        title: '背景音乐播放中',
        icon: 'none'
      })
      proxy.$const.bgMusic.play()
    }
  }

  // 获取全局配置
  const globalConfigList = ref([])
  const showPopup = ref(false)
  const title = ref('')
  const content = ref('')
  const handleGetGlobalConfigList = async () => {
    globalConfigList.value = await proxy.$api.getGlobalConfigList({
      key: ['show_message', 'message_title', 'message_content']
    })
    const showMessage = getShowMessage()
    showPopup.value = globalConfigList.value[0].content !== showMessage
    setShowMessage(globalConfigList.value[0].content)
    title.value = globalConfigList.value[1].content
    content.value = globalConfigList.value[2].content
  }

  const confirmMessage = () => {
    showPopup.value = false
  }

  const getUpdateImage = async () => {
    swiperList.value = await proxy.$api.getUpdateNoticeList()
  }

  const getMpMenu = async () => {
    optionList.value = await proxy.$api.getMpMenu({
      is_enabled: 1
    })
  }


  onMounted(() => {
    getUpdateImage()
    getMpMenu()
    setTimeout(() => {
      handleGetGlobalConfigList()
    }, 1000)
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
  })

</script>
<style lang="scss" scoped>
  /* 轮播指示点 start*/
  .indication {
    margin-top: -15rpx;
    z-index: 11;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .spot {
    // background-color: #FBBD12;
    opacity: 0.8;
    width: 20rpx;
    height: 20rpx;
    margin: 0 10rpx !important;
    left: 0;
    top: 0;
    position: relative;
    z-index: 12;
  }

  .module-card {
    margin: 20rpx 30rpx 0;
    border-radius: 16rpx;
    padding: 24rpx;
    background-color: #fff;
    border: 1px solid #eee;
  }

  .tn-info {

    &__container {
      margin-top: 10rpx;
      margin-bottom: 50rpx;
    }

    &__item {
      width: 47.7%;
      margin: 15rpx 0rpx 15rpx 0rpx;
      padding: 20rpx 30rpx;
      border-radius: 10rpx;


      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
      }

      &__left {

        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          font-size: 40rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;

          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
          }
        }

        &__content {
          font-size: 25rpx;

          &--data {
            color: rgba(255, 255, 255, 0.7);
            margin-top: 5rpx;
            // font-weight: bold;
          }
        }
      }

      &__right {
        &--icon {
          position: absolute;
          right: 0rpx;
          top: 50rpx;
          font-size: 100rpx;
          width: 108rpx;
          height: 108rpx;
          text-align: center;
          line-height: 60rpx;
          opacity: 0.15;
        }
      }

      &__bottom {
        box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
        border-radius: 0 0 10rpx 10rpx;
        position: absolute;
        width: 85%;
        line-height: 15rpx;
        left: 50%;
        bottom: -15rpx;
        transform: translateX(-50%);
        z-index: -1;
        text-align: center;
      }
    }
  }

  .chat-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    right: -120px;
    top: 0;
  }

  .bubble1 {
    position: relative;
    padding: 10px 20px;
    width: 125px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #333;
  }

  /* 左边气泡框样式 */
  .bubble1.left {
    align-self: flex-start;
    background-color: #d1e7dd;
  }

  .bubble1.left::after {
    content: "";
    position: absolute;
    top: 10px;
    left: -16px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #d1e7dd transparent transparent;
  }

  /* 右边气泡框样式 */
  .bubble1.right {
    align-self: flex-end;
    background-color: #cfe2ff;
  }

  .bubble1.right::after {
    content: "";
    position: absolute;
    top: 10px;
    right: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #cfe2ff;
  }

  /* 悬浮 */
  .music {
    animation: suspension 1.5s ease-in-out infinite;
  }

  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }
</style>
